﻿@page "/kanban/swimlane-template"
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@inherits SampleBaseComponent;

@using ej2_blazor_kanban_data_models
@using Syncfusion.Blazor.Kanban

<SampleDescription>
    <p>This sample demonstrates how to customize the swimlane header of Kanban. In this sample, the swimlane header is customized with icons and corresponding to the mapped key field's text.</p>
</SampleDescription>
<ActionDescription>
    <p>The Kanban provides an option to customize its swimlane header using the <code>KanbanSwimlaneSettings</code> -> <code>Template</code> property.</p>
    <p>In this demo, all the swimlane headers are customized with templating as text and icons.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <SfKanban KeyField="Status" DataSource="@cardData">
        <KanbanColumns>
            @foreach (ColumnModel item in columnData)
            {
                <KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField"></KanbanColumn>
            }
        </KanbanColumns>
        <KanbanCardSettings ContentField="Summary" HeaderField="Id"></KanbanCardSettings>
        <KanbanSwimlaneSettings KeyField="AssigneeKey" TextField="Assignee">
            <Template>
                @{
                    SwimlaneSettingsModel swimlane = (SwimlaneSettingsModel)context;
                    <div class="swimlane-template e-swimlane-template-table">
                        <div class="e-swimlane-row-text">
                            <img src="@UriHelper.ToAbsoluteUri($"images/kanban/" + swimlane.KeyField.Replace(" ", "-").ToLower() + ".png")" alt="logo" />
                            <span>@swimlane.TextField</span>
                        </div>
                    </div>
                }
            </Template>
        </KanbanSwimlaneSettings>
    </SfKanban>
</div>

<style>
    .swimlane-template {
        font-size: 15px;
        font-weight: 500;
    }

        .swimlane-template img {
            height: 24px;
            width: 24px;
            border-radius: 50%;
        }

        .swimlane-template span {
            padding-left: 10px;
        }
</style>

@code{
    private List<KanbanDataModel> cardData = new KanbanDataModel().GetTasks();
    private List<ColumnModel> columnData = new List<ColumnModel>() {
        new ColumnModel(){ HeaderText= "To Do", KeyField= new List<string>() { "Open"} },
        new ColumnModel(){ HeaderText= "In Progress", KeyField= new List<string>() { "InProgress"} },
        new ColumnModel(){ HeaderText= "Testing", KeyField= new List<string>() { "Testing"} },
        new ColumnModel(){ HeaderText= "Done", KeyField= new List<string>() { "Close" } }
    };
}